import React from "react";
import {
  Text,
  View,
  TouchableHighlight,
  Dimensions,
  Platform,
  StatusBar,
} from "react-native";
import { clone } from "solomon-utils-rn";
import { connect } from "react-redux";
import { SafeAreaView } from "react-navigation";
// import { connect } from "react-redux";

import * as vars from "../../theme";

import Icon from "../Iconfont";

import styles from "./styles";

// Platform.OS
const { height } = Dimensions.get("window");

class TopBar extends React.Component {
  state = {
    menus: [
      {
        title: "聊天",
        icon: "iconfeedback",
        route: "Chat",
      },
      {
        title: "救火",
        icon: "iconFireIcon",
        route: "Fire",
      },
      {
        title: "找人",
        icon: "iconballoons",
        route: "Find",
      },
      {
        title: "故事",
        icon: "iconinvoice",
        route: "Story",
      },
      {
        title: "个人",
        icon: "iconProfile",
        route: "PersonalPage",
      },
    ],
  };

  // constructor(props) {
  //   super(props);
  //   console.log(this.props);
  // }

  static getDerivedStateFromProps({ publicData }, state) {
    const { currentMenuName } = publicData;
    const newMenus = clone(state.menus);
    // const { menus: newMenus } = newState;
    if (currentMenuName !== state.currentMenuName) {
      const index = newMenus.findIndex(item => item.route === currentMenuName);
      if (index !== -1 && index !== 2) {
        const [, , center] = newMenus;
        newMenus[2] = newMenus[index];
        newMenus[index] = center;
      }
    }
    return {
      ...state,
      menus: newMenus,
      currentMenuName,
    };
  }

  localOnActiveMenu = (index = 2) => {
    const { menus } = this.state;
    const { navigation, publicData } = this.props;
    // const { menuData: menus } = publicData;
    if (index === 1 || index === 3) {
      // const newMenus = [...menus];
      // const [, , activeMenu] = menus;
      // newMenus[2] = menus[index];
      // newMenus[index] = activeMenu;
      // this.setState({ menus: newMenus });
      // dispatch({ type: "public/changeMenuData", payload: newMenus });
      // 跳转路由
      navigation.navigate(menus[index].route);
    } else if (index === 0 || index === 4) {
      const { currentMenuName } = publicData;
      // navigation.navigate({
      //   routeName: menus[index].route,
      //   params: { backPath: currentMenuName },
      // });
      navigation.navigate({
        routeName: menus[index].route,
        params: { backPath: currentMenuName },
      });
    }
  };

  // localSaveContainerInfo = event => {
  //   if (event) {
  //     const { nativeEvent } = event;
  //     console.log("layout", nativeEvent.layout);
  //   }
  // };

  render() {
    const { menus } = this.state;
    const { modalData } = this.props;

    const RenderItem = (index, type = 1) => {
      const currentData = menus[index];
      if (type === 1) {
        return (
          <View style={styles.item}>
            <TouchableHighlight
              style={styles.roundContinaer}
              underlayColor={vars.ColorPrimaryActive}
              onPress={this.localOnActiveMenu.bind(this, index)}
            >
              <View style={styles.round}>
                <Icon type="icon" name={currentData.icon} style={styles.icon} />
              </View>
            </TouchableHighlight>
            <Text style={styles.text}>{currentData.title}</Text>

            {modalData.isNews && index === 0 ? (
              <View style={styles.news} />
            ) : null}
          </View>
        );
      } else if (type === 2) {
        return (
          <View style={styles.active}>
            <TouchableHighlight
              style={styles.activeInnerRound}
              underlayColor={vars.ColorPrimaryActive}
              onPress={this.localOnActiveMenu.bind(this, index)}
            >
              <View style={styles.activeInnerRound}>
                <View style={styles.activeRound}>
                  <Icon
                    type="icon"
                    name={currentData.icon}
                    style={styles.activeIcon}
                  />
                </View>
                <Text style={styles.activeText}>{currentData.title}</Text>
              </View>
            </TouchableHighlight>
          </View>
        );
      }
    };

    return (
      <SafeAreaView
        style={{
          ...styles.root,
          marginTop: height > 800 && Platform.OS === "ios" ? 40 : 2,
          // borderWidth: 1,
        }}
      >
        {Platform.OS === "android" ? (
          <StatusBar
            backgroundColor="rgb(255,255,255)"
            barStyle="dark-content"
          />
        ) : null}
        <View style={styles.container}>
          <View style={styles.left}>
            {RenderItem(0)}
            {RenderItem(1)}
          </View>

          <View style={styles.right}>
            {RenderItem(3)}
            {RenderItem(4)}
          </View>

          {RenderItem(2, 2)}
        </View>
        {/* <View style={styles.bottomContainer} /> */}
      </SafeAreaView>
    );
  }
}

export default connect(stores => ({
  publicData: stores.public,
  modalData: stores.modal,
}))(TopBar);
